<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, PolygonLayer, LineLayer, PointLayer, LayerPopup, LayerSwitch } from '@antv/l7'
import SelfPopup from './components/SelfPopup.vue'

const options: any = ref({
    projection: '',

    center: [118.901995, 32.589023],
    zoom: 6,
})
const handleLoaded = async (scene: Scene) => {
    const datas = await fetch('/mapjson/jiangsu.json').then(res => res.json())

    const polygonLayer: PolygonLayer = new PolygonLayer({ name: 'js_mian' })
    polygonLayer.source(datas).shape('fill').color('#006dff').active({ color: 'yellow' }).style({ opacity: 0.6 })

    const lineLayer: LineLayer = new LineLayer({ name: 'js_xian' })
    lineLayer.source(datas).shape('line').color('pink').active({ color: '#fab' }).style({ opacity: 0.8 }).size([1, 20])  // 1宽 20高

    const lineWallLayer: LineLayer = new LineLayer({ name: 'js_xian_wall' })
    lineWallLayer.source(datas).shape('wall').color('pink').active({ color: '#fab' }).style({ opacity: 0.8 }).size(40)

    const pointLayer: PointLayer = new PointLayer({ name: 'js_dian', zIndex: 99 })

    // size('name', [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]) 按name顺序依次赋予size值 size匹配不够name数量就从头开始
    pointLayer.source(datas).shape('circle').color('#006dff').active({ color: '#bfa' })
        .size('name', [2, 4, 6, 8, 10, 12, 14, 16, 18, 20])
        .style({ opacity: 0.9, raisingHeight: 60 })
        .shape('name', 'text')
        .shape('name', ['square', 'hexagon', 'triangle', 'pentagon',
            'octogon',
            'hexagram',
            'rhombus',
            'vesica']
        )


    // 3d填充
    const threeDPolygonLayer = new PolygonLayer({ name: 'js_3d_mian' })
        .source(datas)
        .size(150000)
        .shape('extrude')
        .color('#0DCCFF')
        .active({
            color: 'rgb(100,230,255)',
        })
        .style({
            heightfixed: true,
            pickLight: true,
            raisingHeight: 200000,
            opacity: 0.8,
        });
    threeDPolygonLayer.on('mousemove', () => {
        threeDPolygonLayer.style({
            raisingHeight: 200000 + 100000,
        });
        // lineLayer.style({
        //     raisingHeight: 200000 + 100000,
        // });
        // pointLayer.style({
        //     raisingHeight: 200000 + 100000,
        // });
        // polygonLayer.style({
        //     raisingHeight: 200000 + 10000,
        // });
    });

    threeDPolygonLayer.on('unmousemove', () => {
        threeDPolygonLayer.style({
            raisingHeight: 200000,
        });
        // lineLayer.style({
        //     raisingHeight: 0,
        // });
        // pointLayer.style({
        //     raisingHeight: 0,
        // });
        // polygonLayer.style({
        //     raisingHeight: 0,
        // });
    });

    // 指定图层弹窗
    const layerPopup = new LayerPopup({
        maxWidth: 'auto',
        items: [
            {
                layer: polygonLayer,
                fields: [
                    {
                        field: 'name',
                        formatValue: (name?: string) => name ? (name.trim() ?? '-') : 'no name',
                    },
                    {
                        field: 'adcode',
                        formatValue: (name?: string) => name ? (name) : 'no name',
                    },
                ],

                // 自定义弹窗内容 会覆盖fields
                customContent: (e) => {
                    const div = document.createElement('div')
                    createApp(SelfPopup, { info: e, popupId: e.name }).mount(div)
                    return div
                }
            },
        ],
        trigger: 'hover',
    });
    scene.addPopup(layerPopup);

    scene.addLayer(polygonLayer)
    scene.addLayer(lineLayer)
    scene.addLayer(lineWallLayer)
    scene.addLayer(pointLayer)

    scene.addLayer(threeDPolygonLayer)

    // 控制图层显隐控件
    let layerSwitch: LayerSwitch = new LayerSwitch({
        multiple: false,
    });
    scene.addControl(layerSwitch)
}
</script>

<style lang="less" scoped>
.three-d-city {
    width: 100%;
    height: 100%;
}
</style>